import React, { useState } from "react";
import type { StatisticProps } from "antd";
import { Col, Row, Statistic, Card } from "antd";
import CountUp from "react-countup";
import Page from "../tables/Page"
import PieChart from "../tables/PieChart"
import { getUserName } from "../utils/auth";

const Master: React.FC = () => {
  const formatter: StatisticProps["formatter"] = (value) => (
    <CountUp end={value as number} separator="," />
  );

  const pieChartData = [
    { value: 40, name: '学生' },
    { value: 30, name: '校内工作人员' },
    { value: 20, name: '校外人员' },
    { value: 10, name: '教师' }
  ];

  const [user, setUser] = useState({
    name: getUserName(),
    level: "管理员",
  });

  return (
    <div className= "h-full flex flex-col jusetify-center p-12 w-300 flex-7">
      <div className="text-4xl font-light m-6">
        欢迎回来， {user.level + user.name}
      </div>
      <div className="m-4">
      <Card title="数据统计">
        <Row gutter={16}>
          <Col span={12}>
            <Statistic title="在线用户" value={11289} formatter={formatter} />
          </Col>
          <Col span={12}>
            <Statistic
              title="上线天数"
              value={33}
              precision={2}
              formatter={formatter}
            />
          </Col>
        </Row>
      </Card>
      </div>
      <div className="m-4">
      <Card title="实时分析">
        <div className="flex">
        <Page />
        <PieChart data={pieChartData} title="用户占比" />
        </div>
      </Card>
      </div>
    </div>
  );
};

export default Master;
